<template>
  <div class="search-container frcc">
    <input
    @focus="handleSearchInputFocus"
    @blur="handleSearchInputBlur"
    ref="searchInput" type="text"
    class="search-input">
    <span class="search-tips c99" :class="{active: searchInputFocus}" @touchstart="touchSearchTips">搜索商品</span>
    <img class="search-icon" :class="{active: searchInputFocus}" :src="searchIcon" alt="搜索icon">
  </div>
</template>

<script>
export default {
  data () {
    return {
      searchIcon: require('@/common/image/search-icon.png'),
      autoFocus: false,
      searchInputFocus: false
    }
  },
  created () {
  },
  mounted () {
  },
  methods: {
    // 点击search-tips
    touchSearchTips (e) {
      let searchInput = this.$refs.searchInput
      searchInput.focus()
      this.handleSearchInputBlur()
    },
    handleSearchInputBlur (e) {
      this.searchInputFocus = false
    },
    handleSearchInputFocus (e) {
      this.searchInputFocus = true
    }
  }
}
</script>

<style lang="stylus" scoped>
@import '~common/stylus/variable.styl'
.search-container
  position relative
  padding 0 .2rem
  height 1rem
  font-size .28rem
  background-color $cff
.search-input
  padding-left .2rem
  width 100%
  height .6rem
  line-height .6rem
  border-radius .3rem
  background-color $cf8
// search-tips  search-icon绝对定位
.search-tips
  position absolute
  left 2.70rem
  flex-shrink 0
  color $c99
  transition left .4s
  &.active
    left .4rem
.search-icon
  position absolute
  right 3.10rem
  height .6rem
  width .6rem
  transition right .4s
  &.active
    right 0
</style>
